<template>
  <div class="box">
    <h2>这是Son子组件</h2>
    <h3>{{ obj }}</h3>
    <h4>{{ bb }}</h4>
    <h2>老爹的钱：{{ money }}</h2>
    <button @click="obj.age++">点击年龄累加</button>
    <button @click="btn">花钱100</button>
  </div>
</template>

<script>
/* 
  目标：掌握使用props选项和emits选项完成父子组件通讯
  
  小结：
    相同点：
      父传子写法Vue3和Vue2是一样的
    不同点：主要是 setup 写法不同了
      0. 由于 setup 中没有了 this，所以主要变化在 setup 内部
      1. props.xxx 取代以前 this.xxx 获取父组件传递的数据
      2. emit() 取代以前的 this.$emit() 调用父组件的自定义事件
*/
export default {
  name: 'Son',
  props: {
    obj: {
      type: Object,
    },
    bb: String,
    money: Number,
  },
  // 🔔 消除 emits 在浏览器控制台的警告
  emits: ['huaqian'],
  // 传入一个形参，建议命名为 props
  setup(props, { emit }) {
    console.log('子组件被调用了')
    // ❌ Vue 2.0 写法，没有了 this 不能用
    // console.log(this.obj)

    // 由于 setup() 里面没有 this 的，所以获取 props 数据的写法也要改变
    // ✅ 1. setup() 传入第一个形参， 2. 通过 形参.xxx 获取
    console.log(props.obj)
    console.log(props.bb)

    // ❌ Vue 2.0 写法： this.$emit('自定义事件', 参数)，没有了 this 不能用
    // Vue 3.0 写法
    // ✅ 1. setup() 第二个形参中解构出 emit，通过 emit 调用父组件上的自定义事件
    const btn = () => {
      emit('huaqian', 100)
    }

    return { btn }
  },
}
</script>

<style>
.box {
  background-color: pink;
  padding: 10px;
}
</style>
